import { AnimationTask } from './animation.sjs';

const queryElement = (ownerInstance, classSelector) => {
  return ownerInstance.selectComponent(`.${classSelector}`);
};

let instance = null;

const leftDirList = ['py_lr', 'wk_l', 'nk_l'];

const rightDirList = ['py_rl', 'wk_r', 'nk_r'];

const animationTime = 65 * 1000;

const fastScale = 3;

let rotateAngleMax = 72;

const imageLeftAnim = new AnimationTask(0, animationTime, 1);
const imageRightAnim = new AnimationTask(0, animationTime, 1);

let moveableLen, sliderWidth, viewWidth;
let startX = 0;
let movePosition;
let currentSliderMove = 0;

let lastDir = '';
let dir = '';

const observerDir = (dirProps, oldDir, ownerInstance) => {
  dir = dirProps;

  if (dirProps.includes('nk')) {
    rotateAngleMax = 72;
  }

  if (dirProps.includes('wk')) {
    rotateAngleMax = 75;
  }

  if (lastDir !== dirProps && lastDir) {
    const isLeft = leftDirList.includes(dir);
    const moveableLen = getMoveableLen(ownerInstance);
    imageRightAnim.maxChangedValue = moveableLen;
    imageLeftAnim.maxChangedValue = moveableLen;

    const len = (currentSliderMove * moveableLen) / 100;

    if (!moveableLen) return;

    if (isLeft) {
      imageRightAnim.setImmediate(0);
      imageLeftAnim.setImmediate(len);
    } else {
      imageLeftAnim.setImmediate(0);
      imageRightAnim.setImmediate(len);
    }
  }
  lastDir = dirProps;
};

const observerValue = (newValue, oldValue, ownerInstance) => {
  if (!instance) {
    instance = ownerInstance;
  }

  return;
  console.log('order value');

  const moveableLen = getMoveableLen(ownerInstance);

  if (!moveableLen) return;

  const isLeft = leftDirList.includes(dir);
  const value = Math.min(100, Math.max(0, newValue));
  const len = (value * moveableLen) / 100;
  currentSliderMove = value;

  if (!dir) return;
  imageLeftAnim.maxChangedValue = moveableLen;
  imageRightAnim.maxChangedValue = moveableLen;

  if (isLeft) {
    // 初始化动画参数
    if (!imageLeftAnim.lastTime) {
    } else {
      imageLeftAnim.startAnimation(len, fastScale);
      console.log('run left 2', len);
    }
  } else {
    // 初始化动画参数
    if (!imageRightAnim.lastTime) {
    } else {
      imageRightAnim.startAnimation(len, fastScale);
      console.log('run righjt 2 ', len);
    }
  }
};

const observerStateValue = (newValue, oldValue, ownerInstance) => {
  if (!instance) {
    instance = ownerInstance;
  }

  const moveableLen = getMoveableLen(ownerInstance);
  if (!moveableLen) return;
  const isLeft = leftDirList.includes(dir);
  const value = Math.min(100, Math.max(0, newValue));

  const len = (value * moveableLen) / 100;

  currentSliderMove = value;
  imageLeftAnim.maxChangedValue = moveableLen;
  imageRightAnim.maxChangedValue = moveableLen;

  if (dir) {
    if (isLeft) {
      // 初始化动画参数
      if (!imageLeftAnim.lastTime) {
        imageLeftAnim.setImmediate(len);
      } else {
        // imageLeftAnim.startAnimation(len); 换成不平滑过渡
        imageLeftAnim.setImmediate(len);

      }
    } else {
      // 初始化动画参数
      if (!imageRightAnim.lastTime) {
        imageRightAnim.setImmediate(len);
      } else {
        // imageRightAnim.startAnimation(len); 换成不平滑过渡
        imageRightAnim.setImmediate(len); 

      }
    }
  }
};

const getMoveableLen = ownerInstance => {
  if (['wk_l', 'wk_r', 'nk_l', 'nk_r']?.includes(dir)) {
    moveableLen = rotateAngleMax;
    return moveableLen;
  }

  const container = queryElement(ownerInstance, 'container');
  if (!container) return;
  const view = container.getBoundingClientRect();

  sliderWidth = 25;
  viewWidth = 319;
  moveableLen = view.width / 2;

  return moveableLen;
};

const setImageRightStyle = (ownerInstance, value) => {
  console.log('order setRith');

  const rightImage = queryElement(ownerInstance, 'image-right');
  const move = Math.max(0, Math.min(moveableLen, value));

  const rotateAngle = Math.max(0, Math.min(rotateAngleMax, value));

  let style = {};

  if (dir == 'py_rl') {
    style = {
      right: `${move}px`,
      transform: `rotateY(${0}deg)`,
    };
  }

  if (dir == 'py_lr') {
    style = {
      right: `${0}px`,
      transform: `rotateY(${0}deg)`,
    };
  }

  if (dir.includes('k_l') || dir.includes('k_r')) {
    style = {
      transform: `rotateY(${0}deg)`,
      right: '0px',
    };
  }

  if (dir === 'wk_r') {
    style = {
      transform: `rotateY(${-rotateAngle}deg)`,
      right: '0px',
    };
  }

  if (dir === 'nk_r') {
    style = {
      transform: `rotateY(${rotateAngle}deg)`,
      right: '0px',
    };
  }

  rightImage.setStyle(style);
};

const setImageLeftStyle = (ownerInstance, value) => {
  const leftImage = queryElement(ownerInstance, 'image-left');
  const move = Math.max(0, Math.min(moveableLen, value));
  const rotateAngle = Math.max(-rotateAngleMax, Math.min(rotateAngleMax, value));

  let style = {};
  if (dir == 'py_lr') {
    style = {
      left: `${move}px`,
      transform: `rotateY(${0}deg)`,
    };
  }

  if (dir == 'py_rl') {
    style = {
      left: `${0}px`,
      transform: `rotateY(${0}deg)`,
    };
  }

  if (dir.includes('k_r') || dir.includes('k_l')) {
    style = {
      transform: `rotateY(${0}deg)`,
      left: '0px',
    };
  }

  if (dir === 'wk_l') {
    style = {
      transform: `rotateY(${rotateAngle}deg)`,
      left: '0px',
    };
  }

  if (dir === 'nk_l') {
    style = {
      transform: `rotateY(${-rotateAngle}deg)`,
      left: '0px',
    };
  }

  leftImage.setStyle(style);
};

imageLeftAnim.onUpdate = function(value) {
  setImageLeftStyle(instance, value);
};

imageLeftAnim.onAnimationEnd = function() {
  instance.callMethod('onAnimationEnd');
};

imageLeftAnim.onAnimationStart = function() {
  instance.callMethod('onAnimationStart');
};

imageRightAnim.onUpdate = function(value) {
  setImageRightStyle(instance, value);
};

imageRightAnim.onAnimationEnd = function() {
  instance.callMethod('onAnimationEnd');
};

imageRightAnim.onAnimationStart = function() {
  instance.callMethod('onAnimationStart');
};

let lastControl = '';

const controlChange = (newControl, oldControl, ownerInstance) => {
  console.log('newControl', newControl, lastControl);

  if (!dir) return;
  const isLeft = leftDirList.includes(dir);
  const curAnim = isLeft ? imageLeftAnim : imageRightAnim;
  if (!curAnim.lastTime) return;
  if (newControl !== lastControl && lastControl) {
    if (newControl === 'stop') {
      curAnim.setImmediate((currentSliderMove * moveableLen) / 100);
      curAnim.stopAnimation();
    } else if (newControl === 'continue') {
      curAnim.startAnimation((currentSliderMove * moveableLen) / 100);
    } else if (newControl === 'close') {
      curAnim.startAnimation(0, fastScale);
    } else if (newControl === 'open') {
      curAnim.startAnimation(moveableLen, fastScale);
    }
  }
  lastControl = newControl;
};

const observerSpeed = (newSpeed, oldSpeed, ownerInstance) => {
  const minDuration = 30 * 1000;
  const maxDuration = 66 * 1000;

  const duration = maxDuration - 9000 * (newSpeed - 1);

  imageLeftAnim.maxDuration = duration;
  imageRightAnim.maxDuration = duration;
};

module.exports = {
  controlChange,
  observerDir,
  observerValue,
  observerStateValue,
  observerSpeed,
};
